<html>
<head>
<body onload="updateLiftList()">

<script language="JavaScript">

	var masterList=new Array();
	
	
	var BenchPress=new Array();
	BenchPress[0]=["BenchPress",""];
	BenchPress[1]=["Pectoralis-Major-Sternal","0.6"];
	BenchPress[2]=["Pectoralis-Major-Clavicular","0.2"];
	BenchPress[3]=["Deltoid-Anterior","0.075"];
	BenchPress[4]=["Triceps-Brachii","0.075"];
	BenchPress[5]=["Biceps-Brachii","0.05"];
	
	var BenchPress_Incline=new Array();
	BenchPress_Incline[0]=["BenchPress_Incline",""];
	BenchPress_Incline[1]=["Pectoralis-Major-Clavicular","0.6"];
	BenchPress_Incline[2]=["Deltoid-Anterior","0.2"];
	BenchPress_Incline[3]=["Triceps-Brachii","0.1"];
	BenchPress_Incline[4]=["Biceps-Brachii","0.1"];
	
	masterList[0]=BenchPress;
	masterList[1]=BenchPress_Incline;
	
	var regExs=new Array();
	
	var muscleName;
	var muscleWeight;
	var work;
	
	var lastAdded;

	var liftListMaster=new Array();
	
	function updateLiftList() {
		var liftListItemsID = document.getElementById("liftList");
		var newLiftListItem;
		var n;
		for (n=0;n<masterList.length;n++) {
			newLiftListItem=document.createElement("option");
			newLiftListItem.setAttribute("value",masterList[n][0][0]);
			newLiftListItem.innerHTML=masterList[n][0][0];
			liftListItemsID.appendChild(newLiftListItem);
		}
	}	
	
	Object.prototype.clone = function() {
		var newObj = (this instanceof Array) ? [] : {};
		for (i in this) {
			if (i == 'clone') continue;
			if (this[i] && typeof this[i] == "object") {
				newObj[i] = this[i].clone();
			} else newObj[i] = this[i]
		} return newObj;
	};
	
	function mainUpdater(lift,set) {
		var repsID=document.getElementById(parseInt(set)+"_"+lift+"_Reps");
		var weightID=document.getElementById(parseInt(set)+"_"+lift+"_Weight");
		work=repsID.value*weightID.value/1000;
		var liftSet=parseInt(set);
			
		//Search masterList array for index to get muscle groups
		
		var i;
		
		for (i=0; i<masterList.length;i++) {
		if (masterList[i][0][0] == lift) {
				updateRegExs(i,liftSet);
			}
		}
		updateOpacities();
	}	
	
	//Update registered exercise list with muscle weights and values
	function updateRegExs(index,set) {
		var tempArray=masterList[index].clone();
		var opacity;
		
		firstElement=tempArray.shift();
		for (x in tempArray) {
			muscleWeight=parseFloat(tempArray[x][1]);
			opacity=work*muscleWeight;
			tempArray[x][1]=opacity;
		}
		tempArray.unshift(firstElement);
		tempArray[0][1]=set;

		var z;
		var rInd;
		for (z=0;z<regExs.length;z++) {
			if (regExs[z][0][0] == firstElement[0] && regExs[z][0][1] == firstElement[1]) {
				rInd=z;
				break;
				
			}
			else rInd=undefined;
		}
		
		if (rInd==undefined) {
			regExs[regExs.length]=tempArray.clone();
		}
		else {
			regExs[z]=tempArray.clone();
		}
	}
	
	function updateOpacities(){
		var muscles=document.getElementsByName("muscle");
		var p;
		for (p=0;p<muscles.length;p++) {
			var tempId=document.getElementById(muscles[p].id);
			tempId.setAttribute("fill-opacity",0);
		}
		var tempArray=regExs.clone();
		var x;
		for (x=0;x<tempArray.length;x++) {
			var temptempArray=tempArray[x].clone();
			temptempArray.shift();
			var i;
			for(i=0;i<temptempArray.length;i++) {
				var SVGID;
				var arrayOpacity;
				var oldOpacity;
				var tprevOpacity;
				var prevOpactiy;
				var newOpacity;
				SVGID=document.getElementById(temptempArray[i][0]);
				arrayOpacity=temptempArray[i][1];
				tprevOpacity=SVGID.getAttribute("fill-opacity");
				prevOpacity=parseFloat(tprevOpacity);
				newOpacity=arrayOpacity+prevOpacity;
				SVGID.setAttribute("fill-opacity",newOpacity);
			}
		}
	}
	
	function addSomething(addedLift) {
		var addedLiftText;
		var inIt=0;
		var setNum=0;
		
		var p;
		for (p=0;p<liftListMaster.length;p++) {
			var curSet = liftListMaster[p][1];
			if(liftListMaster[p][0] == addedLift) {
				if (setNum < curSet) {
					setNum = curSet;
				}
			}
		}
		
		setNum++;
		liftListMaster[liftListMaster.length]=[addedLift,setNum];

		var txtNode = document.createTextNode(addedLift+setNum);
		var div = document.getElementById("lifts");
		
		var liftName = document.createTextNode(setNum+" "+addedLift+" Reps:"); 
		div.appendChild(liftName);
		
		var newLift = document.createElement("input");
		newLift.setAttribute("type","text");
		newLift.setAttribute("name",addedLift);
		newLift.setAttribute("id",setNum+"_"+addedLift+"_Reps");
		newLift.setAttribute("value","0");
		newLift.setAttribute("onchange","mainUpdater(this.name,this.id)");
		div.appendChild(newLift);
		
		div.appendChild(document.createElement("br"));
		
		liftName = document.createTextNode(setNum+" "+addedLift+" Weight:"); 
		div.appendChild(liftName);
		
		newLift = document.createElement("input");
		newLift.setAttribute("type","text");
		newLift.setAttribute("name",addedLift);
		newLift.setAttribute("id",setNum+"_"+addedLift+"_Weight");
		newLift.setAttribute("value","0");
		newLift.setAttribute("onchange","mainUpdater(this.name,this.id)");
		div.appendChild(newLift);
		
		div.appendChild(document.createElement("br"));
	}
	
	function updatePercentage(objEct) {
		var q;
		var percentage=0;
		var nameId=document.getElementById("muscleName");
		var percId=document.getElementById("percentage");
		var muscle=objEct.id;
		
		for (q=0;q<regExs.length;q++) {
			var t;
			for (t=0;t<regExs[q].length;t++) {
				if (regExs[q][t][0] == muscle) {
					percentage+=parseFloat(regExs[q][t][1]);
				}
			}
		}
				
		tooltip.show("<strong>"+muscle+":</strong><br>"+percentage*100+"%", 200);
		
		
	}
	
	var tooltip=function(){
		var id = 'tt';
		var top = 3;
		var left = 3;
		var maxw = 300;
		var speed = 10;
		var timer = 20;
		var endalpha = 95;
		var alpha = 0;
		var tt,t,c,b,h;
		var ie = document.all ? true : false;
		return{
			show:function(v,w){
				if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				document.onmousemove = this.pos;
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
				h = parseInt(tt.offsetHeight) + top;
				clearInterval(tt.timer);
				tt.timer = setInterval(function(){tooltip.fade(1)},timer);
			},
			pos:function(e){
				var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
				var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
				tt.style.top = (u - h) + 'px';
				tt.style.left = (l + left) + 'px';
			},
			fade:function(d){
				var a = alpha;
				if((a != endalpha && d == 1) || (a != 0 && d == -1)){
					var i = speed;	
					if(endalpha - a < speed && d == 1){
						i = endalpha - a;
					}else if(alpha < speed && d == -1){
						i = a;
					}
					alpha = a + (i * d);
					tt.style.opacity = alpha * .01;
					tt.style.filter = 'alpha(opacity=' + alpha + ')';
				}else{
					clearInterval(tt.timer);
					if(d == -1){tt.style.display = 'none'}
				}	
			},
			hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
			}
		};
	}();

	
</script>

<style type="text/css">
	
	#tt {
		position:absolute;
		display:block;
	}
	#tttop {
		display:block;
		height:5px;
		margin-left:5px;
		overflow:hidden;
	}
	#ttcont {
		display:block;
		padding:2px 12px 3px 7px;
		margin-left:5px;
		background:#666;
		color:#fff;
		border-radius: 7px;
		font:11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	}
	#ttbot {
		display:block;
		height:5px;
		margin-left:5px;
		overflow:hidden;
	}
</style>
                  
<select id="liftList">
</select>

<input type="button" onclick="addSomething(liftList.value)" value="Add Exercise"/>

<div id="lifts">
<!--
Bench Press Reps: <input type="text" name="BenchPress" id="1_BenchPress_Reps" value="5" onchange="mainUpdater(this.name,this.id)"/><br>
Bench Press Weight: <input type="text" name="BenchPress" id="1_BenchPress_Weight" value="135" onchange="mainUpdater(this.name,this.id)"/><br>
Incline Bench Press Reps: <input type="text" name="BenchPress_Incline" id="1_BenchPress_Incline_Reps" value="5" onchange="mainUpdater(this.name,this.id)"/><br>
Incline Bench Press Weight: <input type="text" name="BenchPress_Incline" id="1_BenchPress_Incline_Weight" value="135" onchange="mainUpdater(this.name,this.id)"/><br>
Incline Bench Press Reps: <input type="text" name="BenchPress_Incline" id="2_BenchPress_Incline_Reps" value="5" onchange="mainUpdater(this.name,this.id)"/><br>
Incline Bench Press Weight: <input type="text" name="BenchPress_Incline" id="2_BenchPress_Incline_Weight" value="135" onchange="mainUpdater(this.name,this.id)"/><br>
-->
</div>

<p>Neck
<svg width="12cm" height="1cm" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >Sternocleidomastoid</text>-->
	<rect name="muscle" id="Sternocleidomastoid" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Splenius</text>-->
	<rect name="muscle" id="Splenius" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Shoulders
<svg width="12cm" height="1cm" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >Deltoid-Anterior</text>-->
	<rect name="muscle" id="Deltoid-Anterior" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Deltoid-Lateral</text>-->
	<rect name="muscle" id="Deltoid-Lateral" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Deltoid-Posterior</text>-->
	<rect name="muscle" id="Deltoid-Posterior" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="500" y="30" font-family="Verdana" font-size="12" fill="black" >Supraspinatus</text>-->
	<rect name="muscle" id="Supraspinatus" x="500" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Upper Arms
<svg width="12cm" height="1cm" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >Triceps-Brachii</text>-->
	<rect name="muscle" id="Triceps-Brachii" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Biceps-Brachii</text>-->
	<rect name="muscle" id="Biceps-Brachii" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Brachialis</text>-->
	<rect name="muscle" id="Brachialis" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Forearms
<svg width="12cm" height="1cm" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >Brachioradialis</text>-->
	<rect name="muscle" id="Brachioradialis" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Wrist-Flexors</text>-->
	<rect name="muscle" id="Wrist-Flexors" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Wrist-Extensors</text>-->
	<rect name="muscle" id="Wrist-Extensors" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="500" y="30" font-family="Verdana" font-size="12" fill="black" >Pronators</text>-->
	<rect name="muscle" id="Pronators" x="500" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="650" y="30" font-family="Verdana" font-size="12" fill="black" >Supinators</text>-->
	<rect name="muscle" id="Supinators" x="650" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Back
<svg width="14cm" height="1cm" viewBox="0 0 1400 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >General</text>-->
	<rect name="muscle" id="General" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Lats</text>-->
	<rect name="muscle" id="Lats" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Trapezius-Upper</text>-->
	<rect name="muscle" id="Trapezius-Upper" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="500" y="30" font-family="Verdana" font-size="12" fill="black" >Trapezius-Middle</text>-->
	<rect name="muscle" id="Trapezius-Middle" x="500" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="650" y="30" font-family="Verdana" font-size="12" fill="black" >Trapezius-Lower</text>-->
	<rect name="muscle" id="Trapezius-Lower" x="650" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="800" y="30" font-family="Verdana" font-size="12" fill="black" >Scapulae</text>-->
	<rect name="muscle" id="Scapulae" x="800" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="950" y="30" font-family="Verdana" font-size="12" fill="black" >Rhomboids</text>-->
	<rect name="muscle" id="Rhomboids" x="950" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="1100" y="30" font-family="Verdana" font-size="12" fill="black" >Infraspinatus</text>-->
	<rect name="muscle" id="Infraspinatus" x="1100" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="1250" y="30" font-family="Verdana" font-size="12" fill="black" >Subscapularis</text>-->
	<rect name="muscle" id="Subscapularis" x="1250" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Chest
<svg width="14cm" height="1cm" viewBox="0 0 1400 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >General</text>-->
	<rect name="muscle" id="General" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Pectoralis-Major-Sternal</text>-->
	<rect name="muscle" id="Pectoralis-Major-Sternal" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Pectoralis-Major-Clavicular</text>-->
	<rect name="muscle" id="Pectoralis-Major-Clavicular" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="500" y="30" font-family="Verdana" font-size="12" fill="black" >Pectoralis-Minor</text>-->
	<rect name="muscle" id="Pectoralis-Minor" x="500" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="650" y="30" font-family="Verdana" font-size="12" fill="black" >Serratus-Anterior</text>-->
	<rect name="muscle" id="Serratus-Anterior" x="650" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Waist
<svg width="14cm" height="1cm" viewBox="0 0 1400 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >Rectus-Abdominus</text>-->
	<rect name="muscle" id="Rectus-Abdominus" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Transverse-Abdominus</text>-->
	<rect name="muscle" id="Transverse-Abdominus" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Obliques</text>-->
	<rect name="muscle" id="Obliques" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="500" y="30" font-family="Verdana" font-size="12" fill="black" >Quadratus-Lumborum</text>-->
	<rect name="muscle" id="Quadratus-Lumborum" x="500" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="650" y="30" font-family="Verdana" font-size="12" fill="black" >Erector-Spinae</text>-->
	<rect name="muscle" id="Erector-Spinae" x="650" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Hips
<svg width="14cm" height="1cm" viewBox="0 0 1400 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >Gluteus</text>-->
	<rect name="muscle" id="Gluteus" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Abductors</text>-->
	<rect name="muscle" id="Abductors" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Flexors</text>-->
	<rect name="muscle" id="Flexors" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="500" y="30" font-family="Verdana" font-size="12" fill="black" >Deep-External-Rotators</text>-->
	<rect name="muscle" id="Deep-External-Rotators" x="500" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Thighs
<svg width="14cm" height="1cm" viewBox="0 0 1400 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >Quadriceps</text>-->
	<rect name="muscle" id="Quadriceps" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Hamstrings</text>-->
	<rect name="muscle" id="Hamstrings" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Hip-Abductors</text>-->
	<rect name="muscle" id="Hip-Abductors" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>

<p>Calves
<svg width="14cm" height="1cm" viewBox="0 0 1400 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<!--<text x="50" y="30" font-family="Verdana" font-size="12" fill="black" >General</text>-->
	<rect name="muscle" id="General" x="50" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>

	<!--<text x="200" y="30" font-family="Verdana" font-size="12" fill="black" >Gastrocnemius</text>-->
	<rect name="muscle" id="Gastrocnemius" x="200" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="350" y="30" font-family="Verdana" font-size="12" fill="black" >Soleus</text>-->
	<rect name="muscle" id="Soleus" x="350" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="500" y="30" font-family="Verdana" font-size="12" fill="black" >Tibialis-Anterior</text>-->
	<rect name="muscle" id="Tibialis-Anterior" x="500" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
	
	<!--<text x="650" y="30" font-family="Verdana" font-size="12" fill="black" >Popliteus</text>-->
	<rect name="muscle" id="Popliteus" x="650" y="50" width="80" height="50" rx="0" stroke="black" fill="#F62217" fill-opacity="0" onmouseover="updatePercentage(this)" onmouseout="tooltip.hide()"/>
</svg>
</p>
</body>
</head>
</html>